import React from "react";
import { View } from "react-native-ui-lib";
import { commonStyles } from "../../configs/commonStyle";
import NavigationBar from "../common/NavigationBar";
import BasePage from "../BasePage";
import { windowWidth } from "../../configs/platform";
import ListEmpty from "../common/ListEmpty";
import { TabBar, TabBarIndicator, TabView } from "react-native-tab-view";
import Events from "../../utils/events";
import ViewUtils from "../../utils/ViewUtils";
import TimeoutOrder from "./TimeoutOrder";

/**
 * 超时订单
 */
export default class TimeoutOrderMgr extends BasePage {

  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      routes: [
        { key: "all", title: "全部", value: "" },
        { key: "need", title: "未申诉", value: -1 },
        { key: "had", title: "申诉成功", value: 2 },
        { key: "reject", title: "申诉失败", value: 3 },
      ],
    };
  }

  componentDidMount() {
    super.componentDidMount();
    this.changeTabListener = Events.subscribe("changeArticleTab", (data) => {
      logger("改变tab222", data);
      this.setState({ "index": data });
    });
  }

  componentWillUnmount() {
    super.componentWillUnmount();
    this.changeTabListener && this.changeTabListener.remove();
  }

  renderTabBar = (props) => {
    return (
      <TabBar
        {...props}
        style={{ backgroundColor: "white", elevation: 0, alignSelf: "center", height: 45, marginBottom: 8 }}
        activeColor={"#F9D63B"}
        inactiveColor={"#6F6F6F"}
        scrollEnabled
        tabStyle={{ width: windowWidth / 4 }}
        labelStyle={{}}
        renderIndicator={indicatorProps => {
          const width = indicatorProps.getTabWidth(this.state.index);
          return <TabBarIndicator {...indicatorProps} width={30}
                                  style={{ left: (width - 30) / 2, backgroundColor: "#F9D63B" }} />;
        }}
      />
    );
  };

  render() {
    return (
      <View useSafeArea style={commonStyles.body_primary}>
        <NavigationBar
          title={"超时订单"}
          backgroundColor={"transparent"}
          leftButton={ViewUtils.getLeftButton(() => this._onBackPress())}
        />
        <View style={commonStyles.container}>
          <TabView
            lazy
            navigationState={this.state}
            renderScene={({ route }) => <TimeoutOrder {...this.props} {...route} />}
            initialLayout={{ width: windowWidth }}
            onIndexChange={(index) => this.setState({ index })}
            renderTabBar={this.renderTabBar}
            renderLazyPlaceholder={() => <ListEmpty showEmpty={true} />}
          />
        </View>
      </View>
    );
  }
}
